<template>
  <section
    class="relative min-h-screen flex items-center justify-center overflow-hidden px-4"
  >
    <!-- 背景 shapes -->
    <div class="absolute inset-0 overflow-hidden">
      <div
        class="absolute top-20 left-1/6 w-64 h-64 bg-red-100 rounded-full mix-blend-multiply filter blur-xl opacity-70"
      ></div>
      <div
        class="absolute top-40 left-1/6 w-72 h-72 bg-orange-100 rounded-full mix-blend-multiply filter blur-xl opacity-70"
      ></div>
      <div
        class="absolute -bottom-8 left-1/4 w-72 h-72 bg-yellow-100 rounded-full mix-blend-multiply filter blur-xl opacity-70"
      ></div>
    </div>

    <div class="relative max-w-7xl mx-auto">
      <div class="flex flex-col lg:flex-row items-center gap-20">
        <!-- left -->
        <div class="lg:w-1/2 space-y-12">
          <!-- minial badge -->
          <div
            class="inline-flex items-center space-x-2 bg-white px-4 pt-2 rounded-full shadow-sm"
          >
            <span class="h-2 w-2 bg-red-500 rounded-full"></span>
            <span class="text-sm font-medium text-gray-600"> New Release </span>
          </div>
          <!-- heading -->
          <div class="space-y-4">
            <h1 class="text-5xl lg:text-6xl font-bold leading-tight">
              <span
                class="block text-transparent bg-clip-text bg-gradient-to-r from-gray-900 to-gray-500"
              >
                Experience the
              </span>
              <span
                class="block text-transparent bg-clip-text bg-gradient-to-r from-red-600 to-red-300"
              >
                perfect taste
              </span>
            </h1>
            <p class="text-lg text-gray-600 max-w-md">
              Indulge in the extraordinary flavors of our handcrafted burgers,
              made with premium ingredients and culinary expertise.
            </p>
          </div>

          <!-- CTA -->
          <div class="flex flex-col sm:flex-row gap-4">
            <a
              href="#"
              class="relative group inline-flex items-center justify-center px-8 py-3 font-medium text-white bg-gradient-to-r from-red-600 to-red-500 rounded-full overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300"
            >
              <div
                class="absolute inset-0 bg-gradient-to-r from-red-500 to-red-400 translate-y-10 group-hover:translate-y-0 transition-transform duration-300"
              ></div>
              <span class="relative flex items-center gap-2">
                Order Now <ArrowRight class="w-4 h-4" />
              </span>
            </a>

            <a
              href="#"
              class="relative group inline-flex items-center justify-center px-8 py-3 font-medium text-gray-700 bg-white rounded-full overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300"
            >
              <div
                class="absolute inset-0 bg-gray-50 translate-y-10 group-hover:translate-y-0 transition-transform duration-300"
              ></div>
              <span class="relative flex items-center gap-2">
                <Clock class="w-4 h-4" /> 30 min delivery
              </span>
            </a>
          </div>

          <div className="flex items-center gap-8 pt-8">
            <div className="flex items-center gap-2">
              <span className="h-1 w-1 bg-red-500 rounded-full"></span>
              <span className="text-sm font-semibold text-gray-600">
                30 min delivery
              </span>
            </div>

            <div className="flex items-center gap-2">
              <span className="h-1 w-1 bg-red-500 rounded-full"></span>
              <span className="text-sm font-semibold text-gray-600">
                100% secure
              </span>
            </div>
          </div>
        </div>

        <!-- right -->
        <div class="lg:w-1/2 relative">
          <div className="absolute inset-0 flex items-center justify-center">
            <div
              className="absolute w-[110%] h-[110%] border-2 border-dashed border-red-200 rounded-full"
            ></div>
            <div
              className="absolute w-[80%] h-[80%] border-2 border-dashed border-red-200 rounded-full"
            ></div>
          </div>
          <div
            class="absolute inset-0 bg-gradient-to-br from-red-100 to-orange-50 rounded-full filter blur-2xl opacity-70 transform scale-110"
          ></div>
          <div
            class="relative group cursor-pointer transform-gpu transition-all duration-300 hover:scale-105 hover:rotate-6"
          >
            <img
              src="../../assets/burger.png"
              alt="Delicious burger"
              class="object-cover w-[500px] h-[500px] drop-shadow-2xl transform transition-transform duration-500 hover:rotate-12"
            />

            <div
              className="absolute -top-6 -right-6 bg-white/90 
                  backdrop-blur-sm px-4 py-2 rounded-2xl shadow-lg transform
                  hover:scale-110 transition-transform"
            >
              <span
                className="font-bold bg-gradient-to-r from-red-600 to-orange-600
                    bg-clip-text text-transparent"
                >NEW</span
              >
            </div>
            <div
              className="absolute -bottom-4 -left-6 bg-white/90 
                  backdrop-blur-sm px-4 py-2 rounded-2xl shadow-lg transform
                  hover:scale-110 transition-transform"
            >
              <div className="flex items-center gap-1">
                <span className="text-yellow-500">✨✨✨✨✨</span>
                <span className="text-sm font-medium">4.9</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { ArrowRight, Clock } from "lucide-vue-next";

export default {
  name: "Hero",
  components: {
    ArrowRight,
    Clock,
  },
};
</script>
